<script>
import '../assets/plugins/fontawesome-free/css/all.min.css';
// <!-- 载入脚本 -->
// <!-- jQuery -->
import '../assets/plugins/jquery/jquery.min.js';
// <!-- Bootstrap -->
import '../assets/plugins/bootstrap/js/bootstrap.bundle.min.js';
  export default {
    name:"Header",
    data(){
      return{
        user:JSON.parse(sessionStorage.getItem("user")),
        dialogVisible1:false,
        form:{
          low:"",
          new:"",
          oknew:""
        },
        rules: {
          low: [
            {required: true, message: '请输入旧密码', trigger: 'blur'},
            {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
          ], new: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
          ], oknew: [
            {required: true, message: '请确认新密码', trigger: 'blur'},
            {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (value !== this.form.new) {
                  callback(new Error('两次输入密码不一致'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ]
        }
      }
    },
    props:{
      icon:String
    },
    methods:{
      toUser(){
        this.$router.push("/Home")
      },
      toPass(){
        this.dialogVisible1=true;
      },
      loadPass(){
        this.$axios.post('/zzh-staff/updatePassWord',{
          low:this.form.low,
          new:this.form.new,
          oknew:this.form.oknew
        }).then(res=>res.data).then(res=>{
          this.loading = false;
          if(res.resultCode==200){
            this.$message({
              showClose: true,
              message: '修改密码成功',
              type: 'success'
            });
          }else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            });
          }
        })
        this.dialogVisible1=false;
        this.$refs.form.resetFields();
      },
      logout(){
        this.$confirm("你确定退出系统吗？","提示",{
          confirmButtonText:'确定',
          type:'warning',
          center:true,
        }).then(()=>{
          this.$message({
            type:'success',
            message:'退出系统成功'
          })
          this.$router.push("/")
          //清理数据
          this.$store.commit('resetState');
          sessionStorage.clear()
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消退出系统'
          })
        })
      },
      collapse(){
        this.$emit('doCollapse')
      }
    },
  created(){
    this.$router.push("/Home")
  }
  }
</script>

<template>
    <!-- /.navbar -->
    <div style="display: flex;line-height: 60px;">
      <div>
        <i :class="icon" style="font-size: 20px;line-height: 60px" @click="collapse"></i>
      </div>
      <div style="flex: 1;text-align: center;font-size: 34px;">
        <span>库存管理系统</span>
      </div>
      <span>{{ user.username }}</span>
      <el-dropdown>
        <i class="el-icon-arrow-down" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="toPass">修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--    提示框-->
      <el-dialog
          :visible.sync="dialogVisible1"
          width="40%"
          style="margin-top: -50px"
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="mini">
          <el-form-item label="老密码" prop="low">
            <el-input v-model="form.low" type="password" placeholder="请输入老密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new">
            <el-input v-model="form.new" type="password" placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="oknew">
            <el-input v-model="form.oknew" type="password" placeholder="请确认新密码"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false;">取 消</el-button>
        <el-button type="primary" @click="loadPass">确 定</el-button>
      </span>
      </el-dialog>

    </div>

</template>

<style scoped>

</style>